
<template>
  <!-- @click="changeContent(types.type)"  -->
  <div class="box">
    <div class="goodsList-box">
      <ul class="nav-box">
        <li
          v-for="(types, index) in goodsType"
          :key="index"
          @click="changeContent(types.type,index)"
          :class="{to_active:shows==index}"
        >
          {{ types.typeName }}
        </li>
      </ul>

      <div class="content-box">
        <!-- 动态组件 -->
        <keep-alive>
          <component :is="com"></component>
        </keep-alive>
        
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Recommend from "./Recommend.vue";
import Xiaomi from "./Xiaomi.vue";
import Redmi from "./Redmi.vue";
export default {
  name: "Goodslist",
  data() {
    return {
      types: "",
      goodsType: "",
      shows:"0",
      com:"Recommend"
    };
  },
  components: {
    Recommend,Xiaomi,Redmi
  },
  methods: {
    changeContent(type,index) {
      this.shows = index;
      this.com = type;
    },
  },
  created() {
    axios({
      url: "/goodsType",
    }).then((res) => {
    
      this.goodsType = res.data;
    });
  },
};
</script>
// new Vue({
//     el:"#app",
//     data:{
//         currCom:"yuLe",
//         coms:["yuLe","eightGua","sports"]
//     },
//     methods:{
//         show(index){
//             this.currCom = this.coms[index];
//         }
//     },
//     components:{
//         yuLe,eightGua,sports
//     }
// });
<style scoped>
.box {
  overflow-y: auto;
  padding-top: 0.35rem;
}
.goodsList-box {
  display: flex;
}
.nav-box {
  width: 1rem;
  height: 6rem;
  background-color: white;
  position: fixed;
  top: 0.46rem;
  left: 0px;
}
.goodsList-box li {
  margin-top: 0.25rem;
  padding-left: 0.13rem;
  font-size: 0.12rem;
  border-left: 3px solid transparent;
}
/* .goodsList-box li:hover {
  border-left: 3px solid orange;
  font-weight: 700;
} */
.to_active {
  border-left: 3px solid orange !important;
  font-weight: 700;
  }
.content-box {
  flex: 1;
  overflow-y: auto;
  margin-left: 1rem;
  padding-bottom: 0.55rem;
}
a {
  color: #797979;
  text-decoration: none;
}
</style>
 